<template>
  <view>
    <slot name="content" v-bind:imgList="imgList" v-bind:num="num" v-bind:maxlength="maxlength"
      v-bind:isShow="isShow" />
  </view>
</template>
<script>
  import {
    UploadImage
  } from '@/common/utils/index'
  import {
    SERVER_TYPE
  } from '@/common/config.js'
  export default {
    name: 'benben-images-upload',
    props: {
      maxlength: {
        type: [String, Number],
        default: '9',
      },
      imgList: {
        type: Array,
        default: () => [],
      },
      isShowTips: {
        type: Boolean,
        default: false,
      },
      imgIds: {
        type: String,
        default: '',
      },
    },
    data: () => ({
      uploading: false,
      imgIdArr: [],
    }),
    computed: {
      isShow() {
        return this.imgList.length < this.maxlength
      },
      num() {
        return this.imgList.length || 0
      },
    },
    //监听imgIds
    watch: {
      imgIds: {
        handler(val) {
          if (SERVER_TYPE !== 0) {
            this.imgIdArr = val ? (val + '').split(',') : []
          }
        },
        immediate: true,
      },
      imgList: {
        handler(val) {
          if (SERVER_TYPE === 0) {
            this.$emit('update:img-ids', val.length ? JSON.stringify(val) : '')
          }
        },
        immediate: true,
        deep: true,
      },
    },
    methods: {
      //点击删除
      delImage(index) {
        let imgList = JSON.parse(JSON.stringify(this.imgList))
        imgList.splice(index, 1)
        this.$emit('update:img-list', imgList)
        if (SERVER_TYPE !== 0) {
          let imgIdArr = JSON.parse(JSON.stringify(this.imgIdArr))
          imgIdArr.splice(index, 1)
          this.$emit('update:img-ids', imgIdArr.join(','))
        }
      },
      //点击预览
      previewImage(index) {
        uni.previewImage({
          current: this.imgList[index],
          urls: this.imgList,
        })
      },
      //点击上传
      manyChooseImage() {
        let self = this
        let platform = uni.getSystemInfoSync().platform
        if (platform != 'ios') {
          self.manyChooseImage1()
          return
        }
        let imgIdArr = JSON.parse(JSON.stringify(this.imgIdArr))
        let imgList = JSON.parse(JSON.stringify(this.imgList))
        if (self.uploading) return
        if (self.maxlength - self.imgList.length < 1) return
        // 从相册中选择图片
        uni.chooseImage({
          count: self.maxlength - self.imgList.length, // 默认3
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          success: function(res) {
            self.uploading = true
            // 开始上传
            new UploadImage(res.tempFiles, {
              complete: function(res) {
                self.uploading = false
                res.map((item) => {
                  imgIdArr.push(item.id)
                  imgList.push(item.path)
                })
                if (SERVER_TYPE !== 0) {
                  self.$emit('update:img-ids', imgIdArr.join(','))
                }
                self.$emit('update:img-list', imgList)
              },
            })
          },
        })
      },
      manyChooseImage1() {
        let self = this

        let imgIdArr = JSON.parse(JSON.stringify(this.imgIdArr))
        let imgList = JSON.parse(JSON.stringify(this.imgList))
        uni.showModal({
          title: '相机相册信息授权提示',
          content: '用户拍摄/选取内容发布，拍摄/选取图片更换头像，扫描二维码，聊天功能，提交意见反馈或者AR识别等功能？',
          success(res1) {
            if (res1.confirm) {
              // 选择视频
              if (self.uploading) return
              if (self.maxlength - self.imgList.length < 1) return
              // 从相册中选择图片
              uni.chooseImage({
                count: self.maxlength - self.imgList.length, // 默认3
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                success: function(res) {
                  self.uploading = true
                  // 开始上传
                  new UploadImage(res.tempFiles, {
                    complete: function(res) {
                      self.uploading = false
                      res.map((item) => {
                        imgIdArr.push(item.id)
                        imgList.push(item.path)
                      })
                      if (SERVER_TYPE !== 0) {
                        self.$emit('update:img-ids', imgIdArr.join(','))
                      }
                      self.$emit('update:img-list', imgList)
                    },
                  })
                },
              })
            } else if (res1.cancel) {
              console.log('用户点击取消');
            }
          }
        })

      }
    },
    // 组件周期函数--监听组件挂载完毕
    mounted() {},
    // 组件周期函数--监听组件数据更新之前
    beforeUpdate() {},
    // 组件周期函数--监听组件数据更新之后
    updated() {},
    // 组件周期函数--监听组件激活(显示)
    activated() {},
    // 组件周期函数--监听组件停用(隐藏)
    deactivated() {},
    // 组件周期函数--监听组件销毁之前
    beforeDestroy() {},
  }
</script>
<style></style>
